<template>
<div class='box-gov'>
  <unfold>
    <!-- 左侧角色列表 -->
    <template v-slot:tree-list>
      <div class="left box">

        <!-- header -->
        <div class="box-header bg-primary text-white text-weight-regular">
          <q-icon name="iconfont icontubiao-57" color="white" class="q-mr-sm" />
          <span class="head-title vertical-middle user-select-none">企业</span>
          <q-space></q-space>
          <q-input color="teal" outlined dense bg-color="white" v-model="companyName"
                   style="width: 140px;" @keyup.enter="getCompanyList">
            <template v-slot:append>
              <q-btn @click="getCompanyList" flat round dense icon="iconfont icontubiao-21" size="11px" style="margin-right:-10px"></q-btn>
            </template>
          </q-input>
        </div>

        <!-- 列表 -->
        <q-scroll-area class="box-content bg-white" :thumb-style="CommonConfig.thumbStyle">
          <q-list style="min-width: 100px;">
            <div v-for="company in companyList" :key="company.id">
              <q-item
                class="role-item"
                :active="selectedCompany.id === company.id"
                active-class="activated"
                @click="onCompanyClick(company)"
                clickable
                v-ripple
              >
                <q-item-section>{{ company.name }}</q-item-section>
              </q-item>
              <q-separator />
            </div>
          </q-list>
        </q-scroll-area>
      </div>
    </template>

    <!-- 右侧 card -->
    <template v-slot:content>
      <div class="right box" style="padding: 0">
        <div class="relative-position full-height box-content"
             style="padding-left: 20px;padding-right: 20px">
          <div class="flex">
            <span>所选企业：{{selectedCompany.name}}</span>
            <q-space></q-space>
            <select-input ref="selectInput" :list="searchCondition" @search="inputSearch" @clearSearchVal="clearSearchVal"></select-input>
          </div>
          <q-table
            style="padding: 20px 0 0; margin: 0"
            class="scroll myTable stick-last-col"
            :columns="tableColumns"
            :data="tableData"
            row-key="id"
            :loading="isTableLoading"
            table-style="max-height: 100%"
            hide-bottom
            :pagination="{ rowsPerPage: 0 }"
            no-data-label="暂无数据"
          >
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="index" :props="props">
                  {{ props.row.index }}
                </q-td>
                <q-td key="boxId" :props="props">
                  {{ props.row.boxID }}
                </q-td>
                <q-td key="assetNum" :props="props">
                  {{ props.row.assetNumber }}
                </q-td>
                <q-td key="name" :props="props">
                  {{ props.row.deviceName }}
                </q-td>
                <q-td key="system" :props="props">
                  {{ props.row.ncType || '--' }}
                </q-td>
                <q-td key="bingStatus" :props="props">
                  {{ props.row.isBinding?'已绑定':'未绑定' }}
                </q-td>
                <q-td key="update" :props="props">
                  {{ props.row.updateDate || '--' }}
                </q-td>
                <q-td key="operation" :props="props" style="width: 100px;">
                  <q-btn
                    flat round dense
                    icon="iconfont icontubiao-28"
                    color="primary"
                    @click="openDetail(props.row)"
                  >
                    <q-tooltip>详情</q-tooltip>
                  </q-btn>
                  <q-btn
                    flat round dense
                    :icon="props.row.isBinding?'iconfont icontubiao-129':'iconfont icontubiao-128'"
                    color="primary"
                    @click="bind(props.row)"
                  >
                    <q-tooltip>{{props.row.isBinding?'解绑':'绑定'}}</q-tooltip>
                  </q-btn>
                </q-td>
              </q-tr>
            </template>
          </q-table>
          <!--</q-scroll-area>-->
        </div>
      </div>
    </template>
  </unfold>
  <box-detail ref="boxDetail"></box-detail>
  <box-bind ref="boxBind" @submit="boxBindSubmit"></box-bind>
</div>
</template>

<script>
import Unfold from 'src/components/unfold'
import SelectInput from 'src/components/select-input'
import BoxDetail from './components/box-detail'
import BoxBind from './components/box-bind'
// import { getCompany } from 'src/boot/bms/company'
import { getDevicesByName, getDevicesByBoxid, addBox, boxUnBind, boxBind, getCompany } from 'src/boot/bms/box-gov'
import refreshMixin from '../../assets/js/refresh-mixin'

export default {
  name: 'box-gov',
  mixins: [refreshMixin],
  data () {
    return {
      companyName: '', // 企业搜索值
      // 搜索条件
      searchCondition: [{ id: 'deviceName', name: '设备名称' }, { id: 'boxId', name: '盒子id' }],
      deviceName: '', // 设备名称搜索值
      boxId: '', // 盒子id搜索值
      // 表格列
      tableColumns: [
        { name: 'index', label: '序号', align: 'left' },
        { name: 'boxId', label: '盒子ID', align: 'left' },
        { name: 'assetNum', label: '设备编号', align: 'left' },
        { name: 'name', label: '设备名称', align: 'left' },
        { name: 'system', label: '数控系统', align: 'left' },
        { name: 'bingStatus', label: '盒子绑定状态', align: 'left' },
        { name: 'update', label: '更新日期', align: 'left' },
        { name: 'operation', label: '盒子操作', align: 'left' }
      ],
      tableData: [],

      // 表格正在加载
      isTableLoading: false,

      // 公司
      companyList: [],

      // 选择的企业
      selectedCompany: {
        id: null,
        name: null
      }
    }
  },
  created () {
    this.getCompanyList()
  },
  methods: {
    /**
     * 全局刷新数据
     * author: xueli
     */
    refreshInfo () {
      this.companyName = ''
      this.$refs.selectInput.searchVal = ''
      this.searchCondition.forEach(i => {
        this[i.id] = ''
      })
      this.getCompanyList()
    },
    // 获取企业列表
    getCompanyList () {
      let info = {
        name: this.companyName
      }
      // 获取企业列表
      getCompany(info).then((res) => {
        console.log(res)
        this.companyList = res.data
        if (this.companyList.length > 0) {
          this.selectedCompany = {
            id: this.companyList[0].id,
            name: this.companyList[0].name
          }
          this.getDeviceByName()
        }
      })
    },
    // 根据设备名称和企业id获取设备列表
    getDeviceByName () {
      let params = {
        tenantId: this.selectedCompany.id,
        deviceName: this.deviceName
      }
      getDevicesByName(params).then(res => {
        this.tableData = this.initInfo(res.data)
      })
    },
    // 根据盒子id和企业id获取设备列表
    getDeviceByBoxId () {
      let params = {
        tenantId: this.selectedCompany.id,
        boxId: this.boxId
      }
      getDevicesByBoxid(params).then(res => {
        this.tableData = this.initInfo(res.data)
      })
    },
    initInfo (data) {
      return data.map((item, index) => {
        return {
          ...item,
          index: index + 1
        }
      })
    },
    // 搜索
    search (val) {
      this.companyName = val
    },
    onCompanyClick (company) {
      this.selectedCompany.id = company.id
      this.selectedCompany.name = company.name
      this.$refs.selectInput.clearSearchVal()
      this.getDeviceByName()
    },
    // 搜索
    inputSearch (item, searchVal) {
      console.log(item)
      this.searchCondition.forEach(i => {
        this[i.id] = ''
      })
      this[item.id] = searchVal
      if (item.id === 'boxId') {
        this.getDeviceByBoxId()
      } else {
        this.getDeviceByName()
      }
      // this.onRequest()
    },
    // 清空搜索值
    clearSearchVal () {
      this.searchCondition.forEach(i => {
        this[i.id] = ''
      })
      this.getDeviceByName()
    },
    // 显示详情
    openDetail (item) {
      this.$refs.boxDetail.showDialog(item)
    },
    // 绑定与解绑
    bind (item) {
      if (item.isBinding) {
        this.showBoxUnbind(item)
      } else {
        // 显示绑定弹框
        this.$refs.boxBind.showDialog(item)
      }
    },
    // 显示解绑弹框
    showBoxUnbind (item) {
      this.$q.dialog({
        title: `<p class="dialog-notice-title"><i class="iconfont icontubiao-28"></i>
          是否解除该设备与语祯盒子的绑定？</p>`,
        html: true,
        ok: {
          unelevated: true,
          label: '确认'
        },
        cancel: {
          unelevated: true,
          outline: true,
          label: '取消'
        }
      }).onOk(() => {
        boxUnBind({ deviceId: item.id, boxId: item.boxID }).then(res => {
          this.getDeviceByName()
          this.$message.success('解绑成功')
        })
      })
    },
    // 提交绑定数据
    boxBindSubmit (info, deviceId) {
      console.log(info)
      let params = {
        ...info,
        tenantId: this.selectedCompany.id
      }
      addBox(params).then(res => {
        console.log(res)
        let info = {
          deviceId,
          boxId: res.data.id
        }
        boxBind(info).then(res => {
          this.getDeviceByName()
          this.$refs.boxBind.hideDialog()
        }).catch(() => {
          this.$refs.boxBind.submitting = false
        })
      })
    }
  },
  components: {
    Unfold,
    SelectInput,
    BoxDetail,
    BoxBind
  }
}
</script>

<style scoped lang='stylus'>
  .box-gov {
    .box {
      display flex
      flex-direction column
      width 100%
      min-width 250px
      border-radius 6px
      overflow hidden
      height 100%

      .box-header {
        flex 40px 0
        padding 0 20px
        line-height 40px
        font-size 18px
        display flex
        align-items center
      }

      &.left {
        .box-content {
          flex 1
          padding-bottom 20px

          .role-item {
            padding-left 30px
            font-size 16px

            &.activated {
              background #cfd6fe
              color $primary
            }

            &:hover {
              background #e8ebff

              /deep/ .q-focus-helper {
                display none
              }
            }
          }

          .q-separator {
            margin-left 20px
            width calc(100% - 40px)
          }
        }
      }

      &.right {
        .flex{
          line-height 32px;
        }
        .box-content {
          display flex
          flex-direction column
          flex 1
          padding-top 20px
        }
      }
    }
    /deep/ .fold .right-part {
      padding-top 0
    }
  }
</style>
